<!--
  湖北11选5投注页
-->
<template>
  <div class="fixed-header fixed-footer">
    <x-header>
      <span class="rule-select" @click="toggle('rulepop')">大乐透{{(bold ? '胆拖' : '普通')}}
        <i class="iconfont icon-caret-down font-xs"></i>
      </span>
      <a slot="right" @click="toggle('popover')"><i class="iconfont icon-menu font-xxxl"></i></a>
    </x-header>

    <popover v-model="popover" placement="bottom right" position="fixed" :z-index="502">
      <router-link class="px-3 py-2 clickable" tag="div" to='/daletou/prizes'>
        <i class="iconfont icon-clock font-xxxl"></i> 最近开奖
      </router-link>
      <div class="px-3 py-2 clickable" @click="faq('daletou', () => popover = false)">
        <i class="iconfont icon-info font-xxxl"></i> 玩法说明
      </div>
    </popover>
    <masker v-model="popover" position="fixed" :z-index="501"/>

    <popup v-model="rulepop" position="top">
      <div class="bg-white py-2 px-1">
        <div class="text-center">玩法</div>
        <div class="d-flex">
          <div class="rule w-50" :class="{on: !bold}" @click="bold = false"><a>普通玩法</a></div>
          <div class="rule w-50" :class="{on: bold}" @click="bold = true"><a>胆拖玩法</a></div>
        </div>
      </div>
    </popup>

    <div class="clearfix" v-if="more">
      <history :history="history"/>
      <div class="bg-red py-2 px-3">
        <div class="text-right text-grey" @click="toggle('more')">
          <a>收起 <i class="iconfont icon-arrow-up"></i></a>
        </div>
      </div>
    </div>

    <div v-else class="text-grey clickable tips px-3 py-2 bb-l" @click="toggle('more')">
      <em>上期开奖：</em>
      <em class="spacing" v-html="prev.results"></em>
      <em class="float-right">更多 <em class="iconfont icon-arrow-down"></em></em>
    </div>
    <div class="py-2 px-3 bb-l">
      <b class="text-grey">{{current.lotteryNo}}期 {{current.endTime}}截止 <b class="text-red">奖池:{{current.jackpotAmount}}</b></b>
    </div>

    <ball-select v-model="bet" :bold="bold"/>

    <footer class="bottom-action pr-3">
      <div v-if="bet.bets" class="px-3 py-1 br-l" @click="trigger('clear')">
        <i class="iconfont icon-trash align-sub font-xxxl"></i>
      </div>
      <template v-else-if="!bold">
        <popover v-model="genpop" placement="top left" style="left: 1rem" :z-index="502">
          <router-link class="px-4 py-2 clickable" tag="div" to="/daletou/cart?g=1" >机选1注</router-link>
          <router-link class="px-4 py-2 clickable" tag="div" to="/daletou/cart?g=5" >机选5注</router-link>
          <router-link class="px-4 py-2 clickable" tag="div" to="/daletou/cart?g=10" >机选10注</router-link>
        </popover>
        <masker v-model="genpop" position="fixed" :z-index="501"/>
        <button class="btn ml-3 mr-auto" @click="toggle('genpop')">机选</button>
      </template>
      <router-link to="/">首页</router-link>
      <em class="mx-auto" v-show="bet.bets">共{{bet.bets}}注 <b class="text-red">￥{{bet.bets * 2}}元</b></em>
      <button class="btn btn-danger" :class="bet.bets ? '' : 'ml-auto'" :disabled="!bet.bets" @click="confirm">确定</button>
    </footer>
  </div>
</template>

<script>
import { Cell, CellGroup, Popup } from 'vant'
import { get, id, set } from '../../utils/stoage'
import { invoke, faq } from '../../router'
import emitter from '../../utils/emitter'
import BallSelect from './ball-select'
import xHeader from '../widgets/header'
import Popover from '../widgets/popover'
import Masker from '../widgets/masker'
import History from './history'
import http from '../../http'

export default {
  components: {History, xHeader, BallSelect, Popup, CellGroup, Cell, Popover, Masker},
  mixins: [emitter],
  name: 'daletou',
  data: () => ({
    history: [],
    current: {},
    popover: false,
    rulepop: false, // 玩法popup
    genpop: false,  // 机选popup
    more: false,    // 更多历史数据
    bold: false,    // 是否胆拖
    bet: {
      groups: [],   // 投注内容
      bets: 0       // 总注数
    }
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/digital/daletou').then(res => {
      next(vm => {
        res.text && vm.$vux.confirm.show({content: res.text})
        vm.bold = get('daletou.bold', false)
        vm.current = res.current
        vm.history = res.page
        invoke('shake?' + (vm.bold ? 'off' : 'on'))
      })
    })
  },
  methods: {
    trigger (event, data) {
      this.broadcast('ball-select', event, data)
    },
    toggle (prop) {
      this[prop] = !this[prop]
    },
    confirm () {
      var key = 'daletou.cart'
      var cart = get(key, [])
      cart.unshift({
        groups: this.bet.groups,
        bold: this.bold,
        bets: this.bet.bets,
        id: id()
      })
      set(key, cart)
      this.$router.push('/daletou/cart')
    },
    faq
  },
  computed: {
    prev () {
      var prev = {no: '上', results: '<b>等待开奖</b>'}
      if (this.history.length) {
        prev = Object.assign({}, this.history[0])
        if (prev.results) {
          var split = prev.results.split('|')
          prev.results = `<b class="mr-3">${split[0].split(',').join(' ')}</b><a>${split[1].split(',').join(' ')}</a>`
        } else {
          prev.results = '<b>等待开奖</b>'
        }
      }
      return prev
    }
  },
  watch: {
    bold (v) {
      invoke('shake?' + (v ? 'off' : 'on'))
    }
  },
  beforeDestroy () {
    set('daletou.bold', this.bold)
  }
}
</script>
